<script setup>
/**
 * & 文件引入区域
 */
import { onBeforeMount, ref } from "vue";
import { useRouter } from "vue-router";
import { useUseStore } from "@/stores/user";
import { messageStore } from "@/stores/message";
import { getItemMsgList, getUserMsgList } from "@/server/api/chatApi";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
/**
 * & 注册区
 */

/**
 * & 变量声明区
 */
const router = useRouter();
let tabsList = ref(["message.consumer", "message.business"]); // tabs选项卡
let showMsgListIndex = ref(0); // 显示的消息列表
let userId = useUseStore().userId; // 用户的userId
let itemId = useUseStore().itemId; // 用户的itemId
let baseUrl = useUseStore().ing; // 图片基础路径

/**
 * & 函数区
 */
const toChatPage = (data) => {
  router.push("/ChatInterface");
  let { chatObjectId, chatObjectName, userImage } = data;
  console.log(data, "data的值");
  messageStore().itemObj = {
    itemId: chatObjectId,
    itemName: chatObjectName,
    itemImg: userImage,
  };
};

// 获取用户的聊天列表数据（我作为商家而言）
const getItemMsgListFun = async () => {
  let { data } = await getItemMsgList(itemId);
  data.data.forEach((item) => {
    item.userImage = baseUrl + item.userImage;
  });
  messageStore().msgList.itemMsgList = data.data;
  console.log("获取商家聊天页面", messageStore().msgList.itemMsgList);
};

// 获取用户的聊天列表数据（我作为用户而言）
const getUserMsgListFun = async () => {
  let { data } = await getUserMsgList(userId);
  data.data.forEach((item) => {
    item.userImage = baseUrl + item.userImage;
  });
  messageStore().msgList.userMsgList = data.data;
  console.log("获取用户聊天页面", messageStore().msgList.userMsgList);
};

// 渲染的消息列表
const msgListDataFun = (i) => {

  if (i != null) {
    showMsgListIndex.value = i;
  }
  let msgListData = [];

  if (showMsgListIndex.value == 0) {
    msgListData = messageStore().msgList.itemMsgList;
    messageStore().sellerOrbuyer = 0;
  } else {
    messageStore().sellerOrbuyer = 1;
    msgListData = messageStore().msgList.userMsgList;
  }

  return msgListData;
};

onBeforeMount(() => {
  getItemMsgListFun();
  getUserMsgListFun();
});
</script>

<template>
  <!-- 这个页面是message页 -->
  <div class="messagePage">
    <!-- 头部一栏 -->
    <div class="header">
      <div class="Chat">{{ $t("message.title") }}</div>
    </div>

    <!-- <div class="tags">
      <div class="item con">{{ $t("message.sub.item") }}</div>
      <div class="item">{{ $t("message.sub.shop") }}</div>
    </div> -->

    <div class="objectTags">
      <div :class="['item', showMsgListIndex == i ? 'con' : '']" @click="msgListDataFun(i)"
        v-for="(item, i) in tabsList" :key="i">
        {{ $t(item) }}
      </div>
    </div>

    <!-- 聊天 -->
    <div class="chatting">
      <!-- 单个的聊天 -->
      <div class="chatPerson" v-for="(item, index) in msgListDataFun()" @click="toChatPage(item)" :key="index">
        <!-- 左部头像 -->
        <div class="avatarBox">
          <img :src="item.userImage" alt="" />
          <!-- round是消息通知的小图标 -->
          <div class="round"></div>
        </div>

        <!-- 中间名字和信息 -->
        <div class="NameAndMessage">
          <div class="Name">{{ item.chatObjectName }}</div>
          <div class="Message">{{ item.newMessage }}</div>
        </div>

        <!-- 右边时间 -->
        <div class="Time">{{ item.newMessageTime }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.messagePage {

  // 头部一栏
  .header {
    width: 100%;
    padding: 20rem 0 10rem;

    .Chat {
      margin: 0 16rem;
      font-size: 24rem;
      font-weight: 500;
      line-height: 34rem;
      color: #262626;
    }
  }

  >.tags {
    display: flex;
    padding-left: 16rem;

    >.item {
      font-size: 16rem;
      font-weight: 400;
      line-height: 22rem;
      color: #999;

      padding: 5rem 20rem;
      margin-right: 24rem;
      background: #e6e6e6;

      border-radius: 16rem;

      &.con {
        background: #642e8e;
        color: #fff;
        font-weight: 500;
      }
    }
  }

  >.objectTags {
    display: flex;
    margin: 16rem 16rem 6rem;
    padding-bottom: 22rem;
    border-bottom: 1rem solid #e6e6e6;

    >.item {
      font-size: 16rem;
      font-weight: 400;
      line-height: 22rem;
      color: #cccccc;

      margin-right: 16rem;

      &.con {
        font-weight: 500;
        color: #333;
        position: relative;

        &::before {
          content: "";
          position: absolute;

          bottom: -6rem;
          left: 0;
          right: 0;
          margin: auto;

          height: 3rem;
          width: 16rem;
          border-radius: 2rem;

          background: #642e8e;
        }
      }
    }
  }

  // 聊天
  .chatting {
    margin-top: 0rem;

    // 单个的聊天
    .chatPerson {
      width: 358rem;
      height: 50rem;
      padding: 10rem 16rem 0;
      display: flex;
      align-items: center;

      .avatarBox {
        position: relative;
        width: 34rem;
        height: 34rem;
        // background-color: #494c4d;
        background-color: #fff;
        border-radius: 50%;

        >img {
          width: 100%;
          border-radius: 50%;
        }

        .round {
          position: absolute;
          top: -3rem;
          right: -3rem;
          width: 14rem;
          height: 14rem;
          border-radius: 50%;
          background-color: rgb(250, 150, 132);
        }
      }

      .NameAndMessage {
        height: 100%;
        // background-color: grey;
        flex: 1;
        margin: 0 12rem;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        border-bottom: 1rem solid #e5e5e5;
        white-space: nowrap;
        /* 不换行 */
        overflow: hidden;
        /* 超出容器范围时隐藏 */

        .Name {
          max-width: 200rem;
          color: #333;
          font-size: 16rem;
          // 设置名字过长省略
          white-space: nowrap;
          /* 不换行 */
          overflow: hidden;
          /* 超出容器范围时隐藏 */
          text-overflow: ellipsis;
        }

        .Message {
          color: #999;
          font-size: 13rem;
          white-space: nowrap;
          /* 不换行 */
          overflow: hidden;
          /* 超出容器范围时隐藏 */
          text-overflow: ellipsis;
        }
      }

      .Time {
        color: #999;
        height: 100%;
        font-size: 12rem;
        border-bottom: 1rem solid #e5e5e5;
      }
    }
  }
}
</style>
